<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Basic Example — Networked-Aframe</title>
    <meta name="description" content="Basic Example — Networked-Aframe" />

    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>
    <script>
      // see issue https://github.com/networked-aframe/networked-aframe/issues/267
      NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
      NAF.schemas.getComponents = (template) => {
        if (!NAF.schemas.hasTemplate('#avatar-template')) {
          NAF.schemas.add({
            template: '#avatar-template',
            components: [
              {
                component: 'position',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)
              },
              {
                component: 'rotation',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)
              }
            ]
          });
        }
        const components = NAF.schemas.getComponentsOriginal(template);
        return components;
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
    <script src="/js/spawn-in-circle.component.js"></script>
  </head>
  <body>
    <a-scene
      networked-scene="
      room: blocks;
      debug: true;
      adapter: wseasyrtc;
    "
    >
      <a-assets>
        <a-asset-item id="raccoon-obj" src="./assets/Raccoon_Blocks/model.obj"></a-asset-item>
        <a-asset-item id="raccoon-mtl" src="./assets/Raccoon_Blocks/materials.mtl"></a-asset-item>

        <a-asset-item id="scene-obj" src="./assets/Campfire_Blocks/model.obj"></a-asset-item>
        <a-asset-item id="scene-mtl" src="./assets/Campfire_Blocks/materials.mtl"></a-asset-item>

        <img
          id="sechelt"
          crossorigin="anonymous"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg"
        />

        <!-- Templates -->

        <!-- Avatar -->
        <template id="avatar-template">
          <a-entity obj-model="obj: #raccoon-obj; mtl: #raccoon-mtl" scale="5 5 5"></a-entity>
        </template>

        <!-- /Templates -->
      </a-assets>

      <a-entity id="rig">
        <a-entity
          id="player"
          networked="template:#avatar-template;attachTemplateToLocal:false;"
          camera
          position="0 1.6 0"
          spawn-in-circle="radius:2"
          wasd-controls
          look-controls
        ></a-entity>
      </a-entity>

      <a-sky id="image-360" radius="100" src="#sechelt" data-set-image-fade-setup="true" animation__fade=""></a-sky>

      <a-entity obj-model="obj: #scene-obj; mtl: #scene-mtl" position="-0.542 1.5 -6.206" scale="30 30 30"></a-entity>
    </a-scene>
  </body>
</html>
